<template>
  <el-form
    ref="form"
    size="mini"
    :rules="rules"
    :model="formData"
    label-width="130px"
  >
    <el-row v-if="operate === 2">
      <el-col :span="24">
        <el-form-item label="参数编号：">
          <label>{{ formData.id }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属组织：" prop="orgId">
          <el-select
            v-if="operate === 0 || operate === 1"
            v-model="formData.orgId"
            style="width: 100%"
          >
            <el-option
              v-for="item in organizationArray"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <label v-else-if="operate === 2">{{
            formatterOrganization(formData.orgId)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="服务名称：" prop="serviceName">
          <el-input
            v-if="operate === 0 || operate === 1"
            placeholder="请输入"
            v-model="formData.serviceName"
          >
          </el-input>
          <label v-else-if="operate === 2">{{
            formatterState(formData.state)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="参数名称：" prop="name">
          <el-input
            v-if="operate === 0 || operate === 1"
            placeholder="请输入"
            v-model="formData.name"
          >
          </el-input>
          <label v-else-if="operate === 2">{{ formData.name }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="参数值：" prop="value">
          <el-input
            v-if="operate === 0 || operate === 1"
            placeholder="请输入"
            v-model="formData.value"
          >
          </el-input>
          <label v-else-if="operate === 2">{{ formData.value }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="状态：" prop="state">
          <el-select
            v-if="operate === 0 || operate === 1"
            v-model="formData.state"
            style="width: 100%"
          >
            <el-option
              v-for="item in stateArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <label v-else-if="operate === 2">{{
            formatterState(formData.state)
          }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 0 || operate === 1">
      <el-col :span="24" align="center">
        <el-button type="primary" size="mini" @click="add">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addParameter, updateParameter } from "../../axios/api";
import { Message } from "element-ui";

export default {
  props: ["formData", "operate", "organizationArray", "stateArray"],
  data() {
    return {
      rules: {
        orgId: [
          { required: true, message: "请选择所属组织", trigger: "change" }
        ],
        serviceName: [
          { required: true, message: "请输入服务名称", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入参数名称", trigger: "blur" }],
        value: [{ required: true, message: "请输入参数值", trigger: "blur" }]
      }
    };
  },
  methods: {
    formatterOrganization(cellValue) {
      let value = this.organizationArray.filter(item => {
        return item.id === cellValue;
      })[0];
      if (value) return value.name;
      else return "不存在的组织";
    },
    formatterState(cellValue) {
      let value = this.stateArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "不存在的状态";
    },
    add() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.operate === 0) {
            addParameter(
              this.formData,
              () => {
                Message({
                  showClose: true,
                  message: "添加成功！",
                  type: "success"
                });
                this.$emit("hiddenDetailDialog", false);
              },
              res => {
                Message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          } else if (this.operate === 1) {
            updateParameter(
              this.formData,
              () => {
                Message({
                  showClose: true,
                  message: "更新成功！",
                  type: "success"
                });
                this.$emit("hiddenDetailDialog", false);
              },
              res => {
                Message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          }
        }
      });
    },
    clearValidate() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    }
  }
};
</script>
